<template>
    <view class="live-home">
        <!-- 顶部、 -->
        <block>
            <view class="live-top" :style="{ top: StatusBar + 'px' }">
                <DownloadApp></DownloadApp>
                <!-- #ifdef H5 -->
                <view class="live-top-content df-cen-rl">
                    <view class="live-top-left df-ai-cen" @tap="goBack()">
                        <view class="fenxiangiCon" style="width: 24rpx;height: 42rpx;">
                            <image :src="staticImgUrl + 'live/ygfh.png'" mode=""></image>
                        </view>
                    </view>
                    <view class="live-top-right df-ai-cen" @tap="shareBtn()">
                        <view class="fenxiangiCon">
                            <image :src="staticImgUrl + 'live/ygfx.png'" mode=""></image>
                        </view>
                    </view>
                </view>
                <!-- #endif -->
                <!-- #ifdef MP-WEIXIN -->
                <view class="live-top-content df-cen-rl" style="justify-content: flex-start;">
                    <view class="live-top-left df-ai-cen" @tap="goBack()">
                        <view class="fenxiangiCon" style="width: 24rpx;height: 42rpx;">
                            <image :src="staticImgUrl + 'live/ygfh.png'" mode=""></image>
                        </view>
                    </view>
                    <view class="live-top-right df-ai-cen" @tap="shareBtn()" style="margin-left: 40rpx;">
                        <view class="fenxiangiCon">
                            <image :src="staticImgUrl + 'live/ygfx.png'" mode=""></image>
                        </view>
                    </view>
                </view>
                <!-- #endif -->
            </view>
        </block>

        <view class="gsmhbgImg" v-if="showYg==false&&optionsInfo!=null">
            <image :src="optionsInfo.image" mode=""></image>
        </view>

        <block v-if="showYg==true">
            <view class="liveItemInfo" v-if="optionsInfo!=null">

                <view class="gsmhbgImg">
                    <image :src="optionsInfo.image" mode=""></image>
                </view>

                <view class="itemContents">
                    <view class="ygtp">
                        <image :src="optionsInfo.image" mode="aspectFill"></image>
                    </view>
                    <view class="textInfoItems">
                        <view class="yginfos">{{optionsInfo.site_name}}</view>
                        <view class="yginfos" style="padding-top: 9rpx;">
                            {{$util.formatDateCount(optionsInfo.starttime1*1000,'M月D日 h:m')}}开播
                        </view>
                        <view class="yginfosTwos" style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
                            {{optionsInfo.title}}
                        </view>
                    </view>
                </view>

                <view class="live-goods-box" v-if="optionsInfo!=null">
                    <view class="goodsInfoBox">
                        <view class="ygspIcon">
                            <image :src="staticImgUrl + 'live/ygsp.png'" mode=""></image>
                        </view>
                        <view class="live-goods-header">好物抢先看</view>
                    </view>
                    <scroll-view scroll-y="true" class="goods-scrool">
                        <view class="kkryIcon" v-if="optionsInfo.goods.length==0">
                            <image src="https://toc.nanyuecloud.com/toc-inst-app/zqanswer/test/img/xmg/kkrya.png" mode="">
                            </image>
                            <view>暂无内容</view>
                        </view>
                        <block v-else>
                            <view class="goods-row df margin-bottom" v-for="(item, inx) in optionsInfo.goods" :key="inx">
                                <view class="goods-row-image pr">
                                    <view class="pa goods-index bg-orange-red df-cen">{{ inx + 1 }}</view>
                                    <image :src="$util.img(item.sku_image)" mode="aspectFill" style="width: 100%;height: 100%;"></image>
                                </view>
                                <view class="goods-row-info df-col">
                                    <view class="goods-row-title">{{ item.sku_name }}</view>
                                    <view class="df-cen-rl">
                                        <view>
                                            <view class="goods-row-marketprice">￥{{ item.market_price }}</view>
                                            <view class="goods-row-price">￥{{ item.price }}</view>
                                        </view>
                                        <button class="cu-btn round bg-orange-red shadow" @click="jumpGoods(item)">马上抢</button>
                                    </view>
                                </view>
                            </view>
                            <!-- #ifdef H5 -->
                            <view style="height: 250rpx;"></view>
                            <!-- #endif -->
                            <!-- #ifdef MP-WEIXIN -->
                            <view style="height: 100rpx;"></view>
                            <!-- #endif -->
                        </block>
                    </scroll-view>
                </view>
            </view>
        </block>
        <!-- #ifdef H5 -->
        <block v-if="!isNativeApp() && shareContent != null">
            <wx-config :shareContent="shareContent"></wx-config>
        </block>
        <!-- #endif -->
        <block v-if="showFenXiang==true">
            <fenxiang @closeFx="closeFx"></fenxiang>
        </block>
    </view>
</template>

<script>
import {
	mapGetters,
	mapMutations
} from 'vuex'
// #ifdef H5
import wxConfig from '@/common/components/global/wx-config.vue'
// #endif
import DownloadApp from '@/common/components/global/download-app.vue'
import fenxiang from '../components/fenxiang.vue'
export default {
	components: {
		fenxiang,
		DownloadApp,
		// #ifdef H5
		wxConfig
		// #endif
	},
	computed: {
		...mapGetters(['userInfo'])
	},
	data() {
		return {
			showFenXiang: false,
			// #ifdef MP-WEIXIN
			StatusBar: this.StatusBar + 12,
			// #endif
			// #ifdef H5
			StatusBar: this.StatusBar,
			// #endif
			goodsType: true,
			shareContent: null,
			optionsInfo: null,
			showYg: false,
			timer: null
		}
	},
	onShow() {

	},
	onReady() { },
	onUnload() {
		clearInterval(this.timer)
	},
	onHide() {
		clearInterval(this.timer)
		this.showFenXiang = false
	},
	onLoad(option) {
		// console.log("option",option.scene)
		if (option.scene != undefined) {
			this.optionsInfoText = option.scene
		} else {
			this.optionsInfoText = this.$util.queryObj().live_id
		}
		this.init()
		// this.timer = setInterval(() => {
		// 	this.init()
		// }, 10000)
	},
	methods: {
		init() {
			this.$request.getLiveDetail({
				id: this.optionsInfoText
			}).then(res => {
				// console.log("getLiveDetail", res)
				this.optionsInfo = res.data
				this.shareContent = {
					title: res.data.title, // 分享标题
					shareObjectDesc: '醒目购，够醒目，醒目就购啦！', // 分享描述
					thumbUrl: res.data.image // 分享图标
				}

				if (res.data.pushing == 0) {
					this.showYg = true
					if (res.data.pushing == 0) {
						if (res.data.replay_url == null) {
							console.log('没有回看')
						} else {
							console.log('有回看')
							// this.$Router.reLaunch({
							// 	path: '/livePages/live/replay',
							// 	query: {
							// 		live_id: res.id
							// 	}
							// });
							this.$util.redirectTo('/livePages/live/replay', { live_id: res.data.id })
						}
					}
				} else if (res.data.pushing == 1) {
					// this.showYg = true
					setTimeout(() => {
						// this.$Router.reLaunch({
						// 	path: '/livePages/live/live',
						// 	query: {
						// 		live_id: res.id
						// 	}
						// })
						this.$util.redirectTo('/livePages/live/live', { live_id: res.data.id })
					}, 500)
				}
			}).catch(err => {
				console.log('err=>', err)
				this.$util.tip(err.data)
				setTimeout(() => {
					this.goBack()
				}, 500)
			})
		},
		closeFx(e) {
			this.showFenXiang = e
		},
		shareBtn(e) {
			this.showFenXiang = !this.showFenXiang
		},
		// closeBtn() {
		// 	this.$Utils.compatiBleJump({
		// 		key: 'exit'
		// 	}, 1);
		// },
		// 商品点击
		goodsBtn() {
			this.goodsType = true
		},
		// 商品跳转
		jumpGoods(val) {
			// this.$Router.push({
			// 	path: '/shopPages/goods/detail',
			// 	query: {
			// 		goods_id: val.sku_id,
			// 		is_id: val.sku_id,
			// 		type: 1
			// 	}
			// });
			this.$util.redirectTo('/pages/goods/detail/detail', {
				sku_id: val.sku_id,
			})
		},
		goBack() {
			// 判断页面栈是否只有一个
			this.$util.goBack()
		}
	},
	onShareAppMessage(res) {
		var url = '/livePages/live/live-preview-details?live_id=' + this.optionsInfo.id + '&source_member=' + this
			.userInfo.member_id
		return {
			title: this.optionsInfo.title,
			path: url,
			imageUrl: this.optionsInfo.image
		}
	},
	onShareTimeline(res) {
		var url = '/livePages/live/live-preview-details?live_id=' + this.optionsInfo.id + '&source_member=' + this
			.userInfo.member_id
		return {
			title: this.optionsInfo.title,
			path: url,
			imageUrl: this.optionsInfo.image
		}
	}

}
</script>

<style lang="scss">
.live-home {
    width: 100%;
    height: auto;
    // background-color: rgba(0, 0, 0, 0.8);

    .live-top {
        position: absolute;
        width: 100%;
        left: 0;
        top: 0;
        z-index: 9;
    }

    .live-top-content {
        padding: 50rpx 20rpx 0;
        width: 100%;
    }

    .fenxiangiCon {
        width: 38rpx;
        height: 38rpx;
    }

    .fenxiangiCon image {
        width: 100%;
        height: 100%;
    }

    .gsmhbgImg {
        width: 100%;
        height: 100%;
        filter: blur(16rpx);
        transform: scale(1);
        z-index: -1;
    }

    .gsmhbgImg image {
        width: 100%;
        height: 100%;
    }

    .kkryIcon {
        width: 407rpx;
        height: 244rpx;
        margin: 160rpx auto;
        text-align: center;
        font-size: 28rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #999999;
    }

    .kkryIcon view {
        padding-top: 32rpx;
    }

    .kkryIcon image {
        width: 100%;
        height: 100%;
    }

    .liveItemInfo {
        width: 100%;
        height: 100%;
        position: relative;
    }

    .liveItemInfo .gsmhbgImg {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        z-index: 0;
    }

    .itemContents {
        width: 100%;
        padding-top: 231rpx;

        // height: 55%;
        .yginfos {
            font-size: 28rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #ffffff;
            text-align: center;
        }

        .yginfosTwos {
            font-size: 32rpx;
            font-family: PingFang SC;
            font-weight: bold;
            color: #ffffff;
            padding-top: 20rpx;
            text-align: center;
        }

        .ygtp {
            width: 300rpx;
            height: 323rpx;
            border-radius: 24rpx;
            margin: 0 auto;
        }

        .ygtp image {
            width: 100%;
            height: 100%;
            border-radius: 24rpx;
        }
    }

    .textInfoItems {
        width: 90%;
        margin: 0 auto;
        padding-top: 32rpx;
        padding-bottom: 58rpx;
    }

    .live-goods-box {
        width: 100%;
        height: 100vh;
        background: #222222;
        border-radius: 40rpx 40rpx 0rpx 0rpx;
        padding: 0 30rpx;
        position: relative;
        z-index: 2;

        .goodsInfoBox {

            display: flex;
            flex-direction: row;
            align-items: center;

            .ygspIcon {
                width: 26rpx;
                height: 26rpx;
                margin-right: 13rpx;
                font-size: 0;
            }

            .ygspIcon image {
                width: 100%;
                height: 100%;
            }

            .live-goods-header {
                margin: 20rpx 0;
                font-size: 28rpx;
                font-family: PingFang SC;
                font-weight: 500;
                color: #ffffff;
                opacity: 0.55;
            }
        }
    }

    .goods-scrool {
        max-height: 800rpx;
    }

    .goods-row-image {
        width: 180rpx;
        height: 180rpx;
        border-radius: 20rpx;

        image {
            border-radius: 20rpx;
        }
    }

    .goods-index {
        top: 0;
        left: 0;
        width: 40rpx;
        height: 40rpx;
        border-top-left-radius: 20rpx;
        border-bottom-right-radius: 20rpx;
        z-index: 2;
    }

    .goods-row-info {
        margin-left: 20rpx;
        width: 480rpx;
        justify-content: space-between;
    }

    .goods-row-title {
        font-size: 28rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #ffffff;
    }

    .goods-row-marketprice {
        font-size: 22rpx;
        font-family: PingFangSC;
        font-weight: 400;
        text-decoration: line-through;
        color: #919191;
    }

    .goods-row-price {
        font-size: 28rpx;
        font-family: PingFangSC;
        font-weight: 400;
        color: #ff3e35;
    }
}
</style>
